<template>
  <div class='list bc-white'>
    <ul class="bc-gray">
      <li v-for="(item,index) in formatListData" :key="index" class="bc-white pr active" @click="showDetail(item)">
        <!-- <img :src="item.img" alt="" class="img1"> -->
        <div>
          <p class="title white-space">{{item.title}}</p>
          <p class="name white-space">{{item.name}}</p>
          <p class="time white-space">{{item.sub_time}}</p>
        </div>
        <img class="arrow-right" :src="arrow_right" alt="">
      </li>
    </ul>
    <p class="no-data" v-show="listData.length==0">暂时没有数据哦~</p>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components: {},
  name: "",
  data() {
    return {
      arrow_right:require("../../../../../assets/images/home/arrow-right-green.png")
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods: {
    showDetail(item,index){
      if(this.routerDetail)this.routerDetail(item)
    },
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  li{
    padding: 20px;
    display: flex;
    margin-top: 20px;

    .arrow-right{
      width: 20px;
      height: 40px;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }

    .title{
      font-size: 16px;
      height: 50px;
      line-height: 50px;
    }
    .time,.name{
      font-size: 12px;
      margin-top: 10px;
      color: #999;
    }
  }
  
}
</style>